<template>
    <view>
        <view class="cu-custom" :style="[{height:system.CustomBar + 'px'}]">
            <view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
                <view class="action" @tap="BackPage" v-if="isBack">
                    <text class="cuIcon-back"></text>
                    <slot name="backText"></slot>
                </view>
                <view class="content" :style="[{'line-height':system.CustomBar+system.StatusBar + 'px'}]">
                    <slot name="content"></slot>
                </view>
                <slot name="right"></slot>
            </view>
        </view>
    </view>
</template>

<script setup>
    import {computed, defineProps} from 'vue';
    import {system} from "../common/common";

    const props = defineProps({
        bgColor: {
            type: String,
            default: ''
        },
        isBack: {
            type: [Boolean, String],
            default: false
        },
        bgImage: {
            type: String,
            default: ''
        }
    })
    const style = computed(() => {
        var StatusBar = system.StatusBar;
        var CustomBar = system.CustomBar;
        var bgImage = props.bgImage;
        var style = `height:${system.CustomBar}px;padding-top:${system.StatusBar}px;`;
        if (props.bgImage) {
            style = `${style}background-image:url(${props.bgImage});`;
        }
        return style
    })

    function BackPage() {
        if (getCurrentPages().length < 2 && 'undefined' !== typeof __wxConfig) {
            let url = '/' + __wxConfig.pages[0]
            return Taro.redirectTo({url})
        }
        Taro.navigateBack({
            delta: 1
        });
    }
</script>

<style>

</style>
